<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table {
        width: 600px;
        height: 300px;
        margin: 100px auto;
    }

    table thead {
        background-color: skyblue;
    }
</style>

<body>
    <table border='1px'>
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="j_checkAll"> 全选
                </th>
                <th>商品</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody id="j_tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>iphone8</td>
                <td>3000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>iphone9</td>
                <td>4000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>iphone10</td>
                <td>5000</td>
            </tr>
        </tbody>
    </table>

    <script>
        //点击全选的时候，下面的也都选中，若下面有一个没有选中的话，全选按钮就没有选中，若下面的按钮都选中的话全选按钮就选中

        //1、先实现全选和取消全选的做法：让下面的复选框的checked属性（选中属性）跟随全选框状态就行
        //（1）、先获取元素，全选按钮和下面的复选框按钮
        var qx = document.getElementById("j_checkAll"); //获取到全选框
        var fx = document.getElementById("j_tb").getElementsByTagName("input"); //获取到下面的复选框

        //（2）、给获取到的元素添加注册事件
        //把全选按钮中的checked属性给复选框。若checked是true的话就是选中，false的话就是未选中
        qx.onclick = function () {
            // console.log(this.checked);  this.checked的意思是看点击全选按钮的时候的checked的值，true的话就是选中，false的话就是未选中
            //循环下面的复选框，把全选框的checked属性的值赋给每一个复选框
            for (var i = 0; i < fx.length; i++) {
                fx[i].checked = this.checked;
            }
        }
        //2、下面的复选框需要全部选中，上面的全选才选中的做法：
        //给下面的所有复选框添加点击事件，每次点击都要 循环查看下面的复选框的状态是否为checked,如果有一个没有选中的话，上面的全选就不选中。可以设置一个变量来控制是全选还是没全选。
        
        //(1)、先循环下面的每一个复选框按钮
        for( var i = 0; i < fx.length; i++){
            //给每一个复选框加一个点击事件
            fx[i].onclick = function(){
                //定义一个变量来控制全选按钮是否需要选中
                var flag = true;
                //每次点击下面的复选框的时候都要循环检查一下下面的复选框是否都选中
                for( var i = 0 ;i< fx.length;i++){
                    //如果没有没有都被选中的话，flag的值就是false
                    if(!fx[i].checked ){
                        flag = false;
                        break; //这样可以提高代码的运行效率
                    }
                }
                qx.checked = flag;
            }

        }
    </script>
</body>

</html>